<template>
  <div>
    <van-nav-bar title="信息填写" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <van-cell class="cell" is-link @click="showPopup" title="昵称" :value="userinfo.nickname"></van-cell>
      <van-cell class="cell" is-link @click="showPopup" title="性别" value="保密"></van-cell>
      <van-cell class="cell" is-link @click="showPopup('born')" title="出生日期" value="请选择">
        <span v-if="data.time">{{data.time}}</span>
      </van-cell>
      <van-cell class="cell" is-link @click="showPopup('city')" title="所在城市" value="请选择">
        <span
          v-show="data.city.length!=0"
          v-for="(item,index) in data.city"
          :key="index"
        >{{item.name}},</span>
      </van-cell>
      <van-cell class="cell" is-link @click="showPopup" title="学科"></van-cell>
      <van-cell class="cell" is-link @click="showPopup('grade')" title="年级" value="请选择">
        <span v-if="data.grade">{{data.grade}}</span>
      </van-cell>
      <van-action-sheet v-model="act">
        <van-datetime-picker
          v-if="show=='born'"
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="quxiao"
          @confirm="ok"
        />
        <van-area v-if="show=='city'" :area-list="areaList" @cancel="quxiao" @confirm="okcity" />
        <van-picker
          v-if="show=='grade'"
          show-toolbar
          :columns="attrs"
          @cancel="quxiao"
          @confirm="gradeok"
        />
      </van-action-sheet>
    </div>
    <div class="btn">
      <van-button @click="add" color="#fd6614" block type="info">提价信息</van-button>
    </div>
  </div>
</template>

<script>
import city from "@/util/city";
import {
  NavBar,
  Cell,
  Button,
  DatetimePicker,
  ActionSheet,
  Area,
  Picker,
  Popup
} from "vant";
import { Userinfo, attr, user } from "@/request/http";
export default {
  data() {
    return {
      userinfo: {},
      show: "",
      act: false,
      minDate: new Date(1700, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      areaList: city,
      attrs: [],
      discipline: [],
      data: {
        grade: "",
        city: [],
        time: ""
      }
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [ActionSheet.name]: ActionSheet,
    [Area.name]: Area,
    [Picker.name]: Picker,
    [Popup.nmae]: Popup
  },
  created() {
   
    this.requestUserInfo();
    attr().then(res => {
      res.forEach(i => {
        if (i.value.length == 0) {
          return false;
        }
        if (i.id == 1) {
          i.value.forEach(ci => {
            this.attrs.push(ci.name);
          });
        }
        if (i.id == 2) {
          i.value.forEach(ci => {
            this.discipline.push(ci.name);
          });
        }
      });
    });
  },
  methods: {
    quxiao() {
      this.show = "";
      this.act = false;
    },
    ok(v) {
      let youWant =v.getFullYear() + "-" +(v.getMonth() + 1) + "-" + v.getDate();

      this.data.time = youWant;
      this.act = false;
    },
    okcity(v) {
      this.act = false;
      this.data.city = v;
    },
    gradeok(v) {
      this.act = false;
      this.data.grade = v;
    },
    requestUserInfo() {
      Userinfo().then(res => {
          console.log(res);
          
        this.userinfo = res;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup(v) {
      if (v == "born") {
        this.show = v;
        this.act = true;
      } else if (v == "city") {
        this.show = v;
        this.act = true;
      } else if (v == "grade") {
        this.show = v;
        this.act = true;
      }
    },
    add() {
        this.userinfo.birthday=this.data.time
        this.userinfo.city_id=this.data.city[1].code
        this.userinfo.city_name=this.data.city[1].name
        this.userinfo.district_id=this.data.city[2].code
        this.userinfo.district_name = this.data.city[2].name
      user(this.userinfo).then(res => {
        console.log(res);
        this.$toast("数据更新成功");
        this.$router.push('/mine')
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.btn {
  margin: 80px auto;
  width: 95%;
}
.cell {
  height: 50px;
}
.content {
  margin-top: 15px;
}
</style>










<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>信息填写</span>
            <p></p>
        </header>
        <div class="content">
            <van-cell class="cell" is-link @click="showPopup" title="昵称" :value="userinfo.nickname"></van-cell>
            <van-cell class="cell" is-link @click="showPopup" title="性别" value="保密"></van-cell>
            <van-cell class="cell" is-link @click="showPopup('born')" title="出生日期" value="请选择">
                <span v-if="data.time">{{data.time}}</span>
            </van-cell>
            <van-cell class="cell" is-link @click="showPopup('city')" title="所在城市" value="请选择">
                <span
                v-show="data.city.length!=0"
                v-for="(item,index) in data.city"
                :key="index"
                >{{item.name}},</span>
            </van-cell>
            <van-cell class="cell" is-link @click="showPopup" title="学科"></van-cell>
            <van-cell class="cell" is-link @click="showPopup('grade')" title="年级" value="请选择">
                <span v-if="data.grade">{{data.grade}}</span>
            </van-cell>
            <van-action-sheet v-model="act">
                <van-datetime-picker
                v-if="show=='born'"
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="quxiao"
                @confirm="ok"
                />
                <van-area v-if="show=='city'" :area-list="areaList" @cancel="quxiao" @confirm="okcity" />
                <van-picker
                v-if="show=='grade'"
                show-toolbar
                :columns="attrs"
                @cancel="quxiao"
                @confirm="gradeok"
                />
            </van-action-sheet>
        </div>
        <div class="btn">
            <van-button @click="add" color="#fd6614" block type="info">提价信息</van-button>
        </div>
            
    </div>
</template>

<script>
import { password } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
import {Icon,NavBar,Cell,Button,DatetimePicker,ActionSheet,Area,Picker,Popup} from "vant";
import city from "@/util/city";
export default {
    name:"setmessage",
    components:{
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Cell.name]: Cell,
        [Button.name]: Button,
        [DatetimePicker.name]: DatetimePicker,
        [ActionSheet.name]: ActionSheet,
        [Area.name]: Area,
        [Picker.name]: Picker,
        [Popup.nmae]: Popup
    },
    data() {
        return {
        userinfo: {},
        show: "",
        act: false,
        minDate: new Date(1700, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        areaList: city,
        attrs: [],
        discipline: [],
        data: {
            grade: "",
            city: [],
            time: ""
        }
        };
    },
    components: {
        [NavBar.name]: NavBar,
        [Cell.name]: Cell,
        [Button.name]: Button,
        [DatetimePicker.name]: DatetimePicker,
        [ActionSheet.name]: ActionSheet,
        [Area.name]: Area,
        [Picker.name]: Picker,
        [Popup.nmae]: Popup
    },
    created() {
    
        // this.requestUserInfo();
        // attr().then(res => {
        //     res.forEach(i => {
        //         if (i.value.length == 0) {
        //         return false;
        //         }
        //         if (i.id == 1) {
        //         i.value.forEach(ci => {
        //             this.attrs.push(ci.name);
        //         });
        //         }
        //         if (i.id == 2) {
        //         i.value.forEach(ci => {
        //             this.discipline.push(ci.name);
        //         });
        //         }
        //     });
        // });
    },
    methods: {
        ...mapMutations(['course1','course2','loginparams1']),
        back(){
            this.$router.go(-1);
            this.course2()
        },
        quxiao() {
            this.show = "";
            this.act = false;
        },
        ok(v) {
            let youWant =v.getFullYear() + "-" +(v.getMonth() + 1) + "-" + v.getDate();

            this.data.time = youWant;
            this.act = false;
        },
        okcity(v) {
            this.act = false;
            this.data.city = v;
        },
        gradeok(v) {
            this.act = false;
            this.data.grade = v;
        },
        requestUserInfo() {
            Userinfo().then(res => {
                console.log(res);
                
                this.userinfo = res;
            });
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        showPopup(v) {
            if (v == "born") {
                this.show = v;
                this.act = true;
            } else if (v == "city") {
                this.show = v;
                this.act = true;
            } else if (v == "grade") {
                this.show = v;
                this.act = true;
            }
        },
        add() {
            this.userinfo.birthday=this.data.time
            this.userinfo.city_id=this.data.city[1].code
            this.userinfo.city_name=this.data.city[1].name
            this.userinfo.district_id=this.data.city[2].code
            this.userinfo.district_name = this.data.city[2].name
            user(this.userinfo).then(res => {
                console.log(res);
                this.$toast("数据更新成功");
                this.$router.push('/mine')
            });
        }
    }
};
</script>
<style lang="scss" scoped>
@import "@/assets/CSS/index.scss";
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.box{
    width:100%;
}
header{
    width:100%;
    border-bottom:1px solid;
    display:flex;
    text-align:center;
    padding:.2rem 0;
    background:white;
    .van-icon{
        width:10%;
        padding-top: 5px;
    }
    span{
        flex:1;
        font-size:20px;
    }
    p{
        width:10%;
        padding-top: 5px;
    }
}
.btn {
  margin: 80px auto;
  width: 95%;
}
.cell {
  height: 40px;
}
.content {
  margin-top: 15px;
}
</style>

















<template>
  <div>
    <van-nav-bar @click-left="onClickLeft" title="我的学习" left-arrow>
      <template #right>
        <van-icon color="#000" size="20" name="calender-o" />
      </template>
    </van-nav-bar>
    <van-tabs @change="onchange">
      <van-tab v-for="(item,index) in tabs" :key="index" :title="`${item.name}(${item.num})`"></van-tab>
    </van-tabs>
    <div v-if="list.length">
      <mystausItem :data="list" />
    </div>
    <div v-else class="no-login">
        <img src="@/assets/images/empty.png" alt="">
      <div class="info">选择课程</div>
    </div>
  </div>
</template>

<script>
import { mystaus } from "@/request/http";
import { NavBar, Icon, Tab, Tabs } from "vant";
import mystausItem from "@/components/mine/mystausitem";
export default {
  data() {
    return {
      type: 2,
      list: [],
      tabs: []
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    mystausItem
  },
  created() {
    this.onmystaus();
  },
  methods: {
    onmystaus() {
      mystaus(this.type).then(res => {
        console.log(res);
        this.list = res.courseList;
        this.tabs = res.typeNum;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onchange(index) {
      this.type = this.tabs[index].type;
      this.onmystaus();
    }
  }
};
</script>

<style lang="scss" scoped>
.no-login{
    text-align: center;
}
</style>










<template>
  <div>
    <div class="hander">
      <div class="hander_content">
        <div class="hander_info">
          <div @click="avatar" class="avitar">
            <img class="user_img" :src="userinfo.avatar" alt />
            <img v-if="!user_id" class="user_img" src="@/assets/images/user_Headportrait.png" alt />
            <img class="vip-logo" src="@/assets/images/皇冠-2 拷贝@2x.png" alt />
          </div>
          <div class="phone">
            {{userinfo.mobile}} &nbsp;
            <img class="xiugai" src="@/assets/images/修改@2x.png" alt />
          </div>
          <div class="right" @click="yueke">去约课</div>
        </div>
        <div class="hander_mine">
          <ul>
            <li @click="mystatus(item)" v-for="(item,index) in mineList" :key="index">
              <p class="count">{{item.count}}</p>
              <p class="title">{{item.name}}</p>
              <p class="xq">{{item.note}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div @click="share" class="box">
      <div>
        <img class="box_img" src="@/assets/theme-img/下载.png" alt />
      </div>
      <div class="box_content">
        <p>邀请好友注册APP，享多重好礼</p>
        <p class="content_ms">显示特惠，多邀多得</p>
      </div>
      <i class="iconfont icon-arrow-left"></i>
    </div>
    <div class="menu_box">
      <ul>
        <li>
          <p class="title">课程相关</p>
          <div class="item-box">
            <div class="item" @click="turnPage('Concern')">
              <img class="icon-teacher" src="@/assets/theme-img/icon_person_teacher.png" />
              <p>关注的老师</p>
            </div>
            <div class="item" @click="turnPage('Collect')">
              <img class="icon-collect" src="@/assets/theme-img/icon_person_collect.png" />
              <p>我的收藏</p>
            </div>
          </div>
        </li>
        <li>
          <p class="title">订单相关</p>
          <div class="item-box">
            <div class="item" @click="turnPage('Order',{order_type: 2})">
              <img class="icon-order" src="@/assets/theme-img/icon_person_order.png" />
              <p>课程订单</p>
            </div>
            <div class="item" @click="turnPage('Order',{order_type: 3})">
              <img class="icon-order" src="@/assets/theme-img/icon_person_order.png" />
              <p>会员订单</p>
            </div>
            <div class="item" @click="turnPage('Order',{order_type: 1})">
              <img class="icon-order" src="@/assets/theme-img/icon_person_order.png" />
              <p>约课订单</p>
            </div>
          </div>
        </li>
        <li>
          <p class="title">我的账户</p>
          <div class="item-box">
            <div class="item" @click="turnPage('Coupon')">
              <img class="icon-coupon" src="@/assets/theme-img/icon_person_coupon.png" />
              <p>优惠券</p>
              <span></span>
            </div>
            <div class="item" @click="turnPage('Card')">
              <img class="icon-card" src="@/assets/theme-img/icon_person_card.png" />
              <p>学习卡</p>
            </div>
            <div class="item" @click="turnPage('Vip')">
              <img class="icon-vip" src="@/assets/theme-img/icon_person_vip.png" />
              <p>会员</p>
            </div>
          </div>
        </li>
        <li>
          <p class="title">自助服务</p>
          <div class="item-box">
            <div @click="turnPage('Message')" :class="newMessage==true?'item has_message':'item'">
              <img class="icon-news" src="@/assets/theme-img/icon_person_news.png" />
              <p>我的消息</p>
              <span></span>
            </div>
            <div class="item" @click="turnPage('Feedback')">
              <img class="icon-mail" src="@/assets/theme-img/icon_person_mail.png" />
              <p>意见反馈</p>
            </div>
            <div class="item" @click="openCustom">
              <img class="icon-custom" src="@/assets/theme-img/icon_person_custom.png" />
              <p>在线客服</p>
            </div>
            <div class="item" @click="turnPage('options')">
              <img class="icon-custom" src="@/assets/theme-img/icon_person_setting.png" />
              <p>设置</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <van-popup v-model="show">
      <div class="share">
        <img class="shareImage" :src="shareImg" alt />
        <div class="finger">
          <img src="@/assets/images/icon_home_finger.png" alt />
          <p>长按保存到相册</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Userinfo, UserCenter, share } from "@/request/http";
import { Popup } from "vant";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
  data() {
    return {
    //   user_id: "",
      userinfo: {},
      mineList: [
        {
          count: 0,
          name: "我的特色课",
          note: "已购特色课程的学习",
          style: "my-study",
          url: "MyStudy"
        },
        {
          count: 0,
          name: "一对一辅导",
          note: "我的一对一老师辅导",
          style: "my-plan",
          url: "Record"
        },
        {
          count: 0,
          name: "剩余学习币",
          note: "查看剩余学习币",
          style: "my-period",
          url: "MyCurrency"
        }
      ],
      newMessage: false,
      show: false,
      shareImg: ""
    };
  },
  computed: mapState(["user_id"]),
  components: {
    [Popup.name]: Popup
  },
  mounted() {
    document.body.style.background = "#fff";
  },
  created() {
    // this.user_id = localStorage.user_id;
    share().then(res => {
    
      this.shareImg = res.path;
    });
    window.scrollTo(0, 0);
    this.turnPage();
    if (this.user_id) {
      this.requestInfo();
    }
  },
  methods: {
    avatar(){
      this.$router.push("/info")
    },
    yueke(){
      this.$router.push('/oto')
    },
    share() {
      this.show = true;
    },
    mystatus(item) {
      if (item.style == "my-study") {
        this.$router.push("/mystudy");
      }
    },
    openCustom() {
      this.$router.push("/custmoer");
    },
    requestInfo() {
      Userinfo().then(res => {
        // console.log(res);
        this.userinfo = res;
        this.requestCount();
      });
    },
    requestCount() {
      UserCenter().then(res => {
        // console.log(res);
        this.mineList[0].count = res.courses;
        this.mineList[1].count = res.oto;
        this.mineList[2].count = (res.integral / 100).toFixed(2);
      });
    },
    turnPage(name, query) {
        // console.log(this.user_id);
      if (!this.user_id) {
        // 未登录 统一推到验证码登录页面
        this.$router.push({
          name: "login"
        });
        return;
      }
      this.$router.push({
        name: name,
        query: {
          query
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.share {
  width: 335px;
  position: relative;
  .shareImage {
    width: 100%;
    display: block;
  }
  .finger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1111;
    img {
      width: 35px;
      height: 35px;
      margin-right: 20px;
    }
    p {
      font-family: PingFangSC-Medium;
      font-size: 17px;
      color: #fff;
      margin-right: 30px;
    }
  }
}
.menu_box {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 50px;
  li {
    border-bottom: 1px solid #eeeeee;
    .title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #333;
      line-height: 10px;
    }
    .item-box {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      .item {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        width: 25%;
        height: 60px;
        text-align: center;
        padding-bottom: 20px;
        img {
          width: 20px;
          height: 20px;
          display: inline-block;
        }
        p {
          margin-top: 20px;
          font-size: 13px;
          color: #666;
          line-height: 1px;
        }
      }
    }
  }
}
.box {
  width: 90%;
  height: 44px;
  margin: 15px auto;
  background: url("../../assets/theme-img/login-btn.png") no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .box_img {
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
  .box_content {
    text-align: left;
    color: #fff;
    width: 70%;
    .content_ms {
      font-size: 11px;
    }
    p {
      line-height: 5px;
    }
  }
  .iconfont {
    margin-right: 20px;
    color: #fff;
    font-size: 20px;
  }
}
.hander {
  width: 100%;
  height: 218px;
  background: url("../../assets/theme-img/user_bg.png") no-repeat top;
  background-size: 100%;
  position: relative;
  .hander_content {
    position: absolute;
    width: 90%;
    height: 173px;
    background: #fff;
    left: 18px;
    top: 45px;
    border-radius: 5px;
    .hander_info {
      width: 95%;
      height: 70px;
      padding-top: 10px;
      margin-left: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .vip-logo {
        position: absolute;
        left: 55px;
        right: 0px;
        top: 11px;
        width: 20px;
        height: 20px;
      }
      .avitar {
        width: 50px;
        height: 50px;
        border: 1px #777 solid;
        border-radius: 100%;
        overflow: hidden;
        .user_img {
          width: 100%;
          height: 100%;
        }
      }
      .phone {
        width: 75%;
        float: left;
        font-size: 17px;
        .xiugai {
          width: 15px;
          height: 15px;
        }
      }
      .right {
        position: absolute;
        right: 0;
        width: 55px;
        height: 25px;
        background: #eb6100;
        color: #fff;
        text-align: center;
        line-height: 25px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
    }
    .hander_mine {
      height: 80px;
      width: 90%;
      margin: 0 auto;
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          border: 1px #f1f1f1 solid;
          width: 32%;
          height: 100%;
          text-align: center;
          .count {
            color: #eb6100;
            font-size: 19px;
          }
          .title {
            font-size: 15px;
          }
          .xq {
            line-height: 15px;
            font-size: 12px;
            color: #777;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          p {
            line-height: 5px;
          }
        }
      }
    }
  }
}
</style>





















<template>
  <div>
    <div class="logo">
      <img src="@/assets/images/login.png" alt />
    </div>
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="others">
          <span class="forget" @click="forgot">找回密码</span>
          <span class="login_CAPTCHA" @click="codeLogin">注册/验证码登录</span>
        </div>
        <div class="btn">
          <van-button color="#fd6614" round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Form, Button, Field, Toast } from "vant";
import { login } from "@/request/http";
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  mounted() {
    document.body.style.background = "#fff";
    localStorage.removeItem("adminToken");
    localStorage.removeItem("user_id");
  },
  components: {
    [Form.name]: Form,
    [Button.name]: Button,
    [Field.name]: Field,
    [Toast.name]: Toast
  },
  methods: {
    forgot() {},
    codeLogin() {
      this.$router.push("/smslogin")
    },
    onSubmit() {
      //?mobile=15083020522&password=123456&type=1
      // let obj = {
      //   mobile: this.username,
      //   password: this.password,
      //   type: 1
      // };
      // login(obj)
      //   .then(res => {
      //     console.log(res.data);
      //     if (res.data.code === 200) {
      //       localStorage.setItem("adminToken", res.data.remember_token);
      //       localStorage.setItem("user_id", res.data.id);
      //       Toast.success(res.data.msg);
      //       this.$router.push("/mine");
      //     } else if (res.data.code === 201) {
      //       Toast.fail(res.data.msg);
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    }
  }
};
</script>


<style lang="scss" scoped>
.btn{
  margin-top: 50px;
}
.others {
  width: 90%;
  display: flex;
  margin: 5px auto;
  justify-content: space-between;
  .forget {
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .login_CAPTCHA {
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
}
.form {
  width: 83%;
  margin: 0 auto;
}
.logo {
  width: 70%;
  height: 51px;
  margin: 60px auto;
  img {
    width: 100%;
  }
}
</style>









<template>
    <div id="aa">
          <div class="heaa">
            <ul>
              <li>
                <van-icon name="arrow-left" size="20" @click="back" />
              </li>
              <li>讲师详情</li>
              <li></li>
            </ul>
          </div>

          <div class="hemp">
              <ul>
                  <li>{{list.teacher_name}}</li>
                  <img :src="list.teacher_avatar" alt="">
                  <!-- <img :src="list.avatar" alt=""> -->
              </ul>
          </div>

          <van-tabs v-model="activeName">
        <van-tab title="讲师介绍"    name="a" >
          
          <li>

          <p>{{list.teacher_name}}</p>
            </li></van-tab>
        <van-tab title="主讲课程" name="b">内容 2</van-tab>
        <van-tab title="学员评价" name="c">内容 3</van-tab>
      </van-tabs>
  </div>
</template>
<script>
import { list1 } from "@/request/api.js"
// import { list1 } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name:"member",
     data() {
    return {
      list: []
    };
  },
  methods: {
    ...mapMutations(['course1','course2']),
    back(){
        this.$router.go(-1);
        this.course2()
    },
    save() {
      list1({ id: this.$route.query.id }).then(res => {
        // this.list = res.data.info;
        console.log(res);
        // console.log(this.$route.query.id);
        //  this.list=res.data.teachers[0]
      });
    }
  },
  mounted() {
    this.save();
    
  }
};
</script>

<style lang="scss" scoped>
#aa {
  width: 100%;
}
.heaa {
background: linear-gradient(180deg,#63b7fe,#4e7de3);

  height: 110px;
  ul {
    // background: rebeccapurple;
    height: 40px;
    display: flex;
    justify-content: space-between;
    font-family: PingFangSC-Medium;

    font-weight: 500;
    color: white;
    li {
      line-height: 40px;
      font-size: 20px;
    }
  }
}
.hemp{
    width: 95%;
    background: white;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: -60px;
    border-radius: 5px;
    img{
      width: 50px;
    }
}
</style>